<template>
    <div class="progress">
        <div class="firstStep">
            <div v-if="props.modelValue === 1" class="one">1</div>
            <div v-else>
                <img
                    class="yz_progress_circle"
                    src="@/assets/ecommerce/upgradeYouZanMemberPass/yz_CircleCheckFill.png" />
            </div>
            <div class="text">{{ progress[0] || '标题1' }}</div>
        </div>
        <div class="line-active"></div>

        <div v-if="props.type === 3" class="nextStep">
            <div v-if="props.modelValue < 3" class="step-num" :class="{ 'step-num-active': props.modelValue === 2 }">
                2
            </div>
            <div v-else>
                <img
                    class="yz_progress_circle"
                    src="@/assets/ecommerce/upgradeYouZanMemberPass/yz_CircleCheckFill.png" />
            </div>
            <div class="text" :class="{ active: props.modelValue > 1 }">{{ progress[1] || '标题2' }}</div>
        </div>
        <div v-if="props.type === 3" class="line" :class="{ 'line-active': props.modelValue === 3 }"></div>

        <div class="nextStep">
            <div v-if="props.modelValue < props.type" class="step-num">{{ props.type }}</div>
            <div v-else>
                <el-icon :style="{ fontSize: size + 'px' }" color="#FF6B00">
                    <CircleCheckFilled />
                </el-icon>
            </div>
            <div class="text" :class="{ active: props.modelValue === props.type }">{{ progress[2] || '完成' }}</div>
        </div>
    </div>
</template>
<script setup lang="tsx">
import { ref } from 'vue';

interface Props {
    modelValue: number; // 1 第一步  2 第二步  3 第三步
    type: number; //  2 分两步   3 分三步
    progress?: string[]; // 步骤条名称
}
const props = withDefaults(defineProps<Props>(), {
    modelValue: 1,
    type: 3,
    progress: () => []
});
const emit = defineEmits(['update:modelValue']);
</script>
<style scoped lang="scss">
$length: 32px;
.progress {
    display: flex;
    align-items: center;
    .firstStep {
        display: flex;
        align-items: center;
        .one {
            width: $length;
            height: $length;
            line-height: $length;
            border-radius: 50%;
            text-align: center;
            color: #fff;
            background-color: #ff6b00;
        }
        .text {
            color: #ff6b00;
            text-indent: 6px;
            white-space: nowrap;
        }
    }
    .nextStep {
        display: flex;
        align-items: center;
        .step-num {
            width: $length;
            height: $length;
            line-height: $length;
            border-radius: 50%;
            text-align: center;
            color: #fff;
            background-color: #ddd;
        }
        .step-num-active {
            color: #fff;
            background-color: #ff6b00;
        }
        .text {
            text-indent: 6px;
            white-space: nowrap;
        }
        .active {
            color: #ff6b00;
        }
    }

    .yz_progress_circle {
        width: 32px;
        height: 32px;
    }
    .line {
        width: 200px;
        height: 0;
        margin: 0 10px;
        border-top: 1px dashed #ccc;
    }
    .line-active {
        width: 200px;
        height: 0;
        margin: 0 10px;
        border-top: 1px dashed #ff6b00;
    }
}
</style>
